<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    <template #buts>
      <a-button type="primary" @click="visible = true">
        <template #icon>
          <icon-plus></icon-plus>
        </template>
        <template #default>新增LOGO</template>
      </a-button>
    </template>
  </pageHeader>
  <TableTurn :tableData="getData" ref="tableRef">
    <a-table-column :width="70" align="center">
      <template #title> 序号 </template>
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column title="LOGO" :width="200" align="center">
      <template #cell="{ record }">
        <a-image width="200" :src="record.url" />
      </template>
    </a-table-column>
    <a-table-column
      title="LOGO名称"
      :width="200"
      align="center"
      data-index="name"
    >
    </a-table-column>
    <a-table-column
      title="是否为默认"
      :width="200"
      align="center"
      data-index="default"
    >
      <template #cell="{ record }">
        {{ record.isDefault ? '是' : '否' }}
      </template>
    </a-table-column>
    <!-- <a-table-column title="备注" :width="80" align="center" data-index="remak">
    </a-table-column> -->
    <!-- 操作item -->
    <a-table-column align="center" :width="300" fixed="right" title="操作">
      <template #cell="{ record }">
        <a-button type="text" @click="editDetail(record.id)">
          设置为默认
        </a-button>
        <!-- <a-button type="text" @click="delDetail(record.id)"> 删除 </a-button> -->
      </template>
    </a-table-column>
  </TableTurn>
  <a-modal
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="visible = false"
    :title="title"
  >
    <a-form :model="form.data" auto-label-width>
      <a-form-item
        validate-trigger="input"
        field="url"
        label="上传LOGO"
        required
      >
        <UploadFile
          :file-type-list="['JPEG', 'JPG', 'PNG', 'GIF', 'SVG']"
          ref="refUploadFile"
          v-model:fileList="logoUrl"
          listType="picture-card"
          :limit="1"
          :args="{
            download: true,
          }"
        />
      </a-form-item>
      <a-form-item field="name" tooltip="自动读取文件名" label="LOGO名称">
        <a-input v-model="form.data.name" />
      </a-form-item>
      <!-- <a-form-item field="remak" label="备注">
        <a-input
          v-model="form.data.remak"
          placeholder="please enter your username..."
        />
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, ref, computed, onMounted, watch } from 'vue';
  import {
    PostflowCardlogo,
    GetflowCardlogo,
    PutflowCardlogoDef,
  } from '@/api/equipment-management/base-setting/index';
  import { number } from 'echarts';

  const title: string = 'LOGO设置';
  const breadCrumb: string[] = ['系统管理', '基础设置', 'LOGO设置'];
  const visible = ref(false);
  const form = reactive<any>({ data: {} });
  const tableRef = ref();
  const getData = async () => {
    const res = await GetflowCardlogo();
    return Promise.resolve(res);
  };
  let logoUrl = computed({
    get() {
      if (!form.data.url) {
        return [];
      }
      return [
        {
          ...form.data,
          fileUrl: form.data.url || form.data.sourceAddr,
          fileName: form.data.name,
          sourceAddr: form.data.sourceAddr,
        },
      ];
    },
    set(val: any[]) {
      const { sourceAddr: url, fileName: name, id, uid } = val[0];
      form.data = { url, name, id, uid };
    },
  });
  const handleOk = async () => {
    //
    const { url, name, remak } = form.data;
    await PostflowCardlogo({ url, name, remak });
    form.data = {};
    tableRef.value.loadData();
  };
  const editDetail = async (id: number) => {
    //
    await PutflowCardlogoDef({ id });
    tableRef.value.loadData();
  };
  // const delDetail = async (id: number) => {
  //   //
  //   // await
  // };
  // const addLOGO = () => {
  //   //
  //   visible.value = true;
  // };
</script>

<style lang="less" scoped></style>
